<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/back/component/pageHead.jsp" %>

<!-- 发布商品的页面 -->
<html class="no-js" lang="zxx">
<head>
    <base href="<%=basePath%>">
    <meta charset="utf-8">
    <title>Layui</title>

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="back/css/layui.css" media="all">
    <!--  axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="front/assets/js/vue.js"></script>
    <!--  文件上传-->
    <link rel="stylesheet" href="back/dropzone-5.7.0/dist/dropzone.css"/>
    <link rel="stylesheet" href="back/dropzone-5.7.0/dist/min/basic.min.css"/>

    <script src="back/dropzone-5.7.0/dist/min/dropzone.min.js"></script>

    <style>
        .dropzone {
            border: 2px dashed #0087F7;
            border-radius: 5px;
            background: white;
        }
    </style>
</head>

<body>
<!--    文件上传-->
<div class="layui-card">
    <div class="layui-card-header">重新上传图片</div>
    <div class="layui-card-body" style="width: 40%">
        <div id="dropz" class="dropzone"></div>
    </div>
</div>


<form id="app1" class="layui-form layui-form-pane" lay-filter="example" action="">
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <input type="hidden" name="furnitureId" lay-verify="required"  autocomplete="off"
                   class="layui-input" value="${furniture.furnitureId}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品图片</label>
        <img id="showfurnitureImg" src="${furniture.furnitureImg}" width="20%">
    </div>
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <input type="hidden" value="${furniture.furnitureImg}" name="furnitureImg" id="furnitureImg" class="layui-input" lay-verify="furnitureImg">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">商品名称</label>
        <div class="layui-input-inline">
            <input type="text" name="furnitureName" lay-verify="required" placeholder="请输入商品名称" autocomplete="off"
                   class="layui-input" value="${furniture.furnitureName}">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">价格</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="price" lay-verify="price" placeholder="￥" autocomplete="off"
                       class="layui-input" value="${furniture.price}">
            </div>


        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">商品类别</label>
        <div class="layui-input-block">
            <select name="categoryId" lay-filter="aihao">
                <c:forEach var="category" items="${categorys}">
                    <c:if test="${category.categoryId == furniture.categoryId}">
                        <option selected value="${category.categoryId}">${category.categoryName}</option>
                    </c:if>
                    <c:if test="${category.categoryId != furniture.categoryId}">
                        <option value="${category.categoryId}">${category.categoryName}</option>
                    </c:if>
                </c:forEach>
            </select>
        </div>
    </div>


    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">详情</label>
        <div class="layui-input-block">
            <textarea name="describe" placeholder="请输入内容" lay-verify="describe"
                      class="layui-textarea">${furniture.describe}</textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <button class="layui-btn" lay-submit="" lay-filter="demo2">发布商品</button>
    </div>
</form>


<script src="back/layui.js" charset="utf-8"></script>
<script src="front/component/js/head.js"></script>
<script src="back/js/updateFurniture.js"></script>

<script>
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer


        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 5) {
                    return '标题至少得5个字符';
                }
            },
            price: function (value) {
                if (value <= 0) {
                    return '价格不能小于等于0';
                }
            },
            describe: function (value) {
                if (value.length < 5) {
                    return '描述至少得5个字符';
                }
            },
            furnitureImg: function (value) {
                if (value.length < 1) {
                    return '您必须上传图片'
                }
            }
        });

        //监听指定开关
        form.on('switch(switchTest)', function (data) {
            layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
                offset: '6px'
            });
            layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
        });

        //监听提交
        form.on('submit(demo2)', function (data) {
            // layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // })
            // layer.alert(data.field)
            axios.post(PATH + "/furniture/update", {
                furnitureId: data.field.furnitureId,
                furnitureName: data.field.furnitureName,
                describe: data.field.describe,
                categoryId: data.field.categoryId,
                furnitureImg: data.field.furnitureImg,
                price: data.field.price
            }).then((resp) => {
                if (resp.data.code != '00000') {
                    layer.alert("修改失败"), {
                        title: '提示'
                    }
                    console.log(parent);
                    return false;
                } else {
                    console.log(parent);

                    layer.msg("修改成功")

                    setTimeout(()=>{
                        parent.window.location.reload()
                    },1500)
                    return true;
                }
            })
            return false;
        });


        //表单取值
        layui.$('#LAY-component-form-getval').on('click', function () {
            var data = form.val('example');
            alert(JSON.stringify(data));
        });

    });
</script>

</body>

</html>